---
import userConfig from 'virtual:starlight/user-config';
import type { Props } from '@astrojs/starlight/props';
import { Icon } from '@astrojs/starlight/components';
import config from '../../config';

const slug = Astro.url.pathname.replace(/^\//, "").replace(/\/$/, "");
const editLink = userConfig.editLink.baseUrl;

const {
  lang,
  lastUpdated,
	entry: {
		data: { template },
	},
} = Astro.locals.starlightRoute;

let editUrl = Astro.locals.starlightRoute.editUrl;

// Change path for component source files
if (slug.startsWith("docs/component/")) {
  editUrl = new URL(
    `platform/src/components/${slug.replace("docs/component/", "")}.ts`, editLink
  );
}
// Change path for reference source files
else if (slug === "docs/reference/config") {
  editUrl = new URL("platform/src/config.ts", editLink);
}
else if (slug === "docs/reference/global") {
  editUrl = new URL("platform/src/global.d.ts", editLink);
}
else if (slug === "docs/reference/cli") {
  editUrl = new URL("cmd/sst/main.go", editLink);
}
else if (slug === "docs/common-errors") {
  editUrl = new URL("pkg/project/stack.go", editLink);
}
else if (slug === "docs/examples") {
  editUrl = new URL("examples", editLink);
}
---

{
  template === "doc" && (
    <footer class="doc">
      <div class="meta sl-flex">
        <div>
          <a href={editUrl} target="_blank" class="sl-flex">
            <Icon name="pencil" size="1em" />
            Edit this page
          </a>
          <a href={config.twitter} target="_blank" class="sl-flex">
            <Icon name="x.com" size="1em" />
            Follow us on X.com
          </a>
          <a href={`${config.github}/issues/new`} target="_blank" class="sl-flex">
            <Icon name="github" size="1em" />
            Find a bug? Open an issue
          </a>
          <a href={config.discord} target="_blank" class="sl-flex">
            <Icon name="discord" size="1em" />
            Join our Discord community
          </a>
        </div>
        <div>
          <p>
            Built with <a target="_blank" href={`${config.github}/tree/dev/www/sst.config.ts`}>Astro &amp; SST</a>
          </p>
          <p>
            Last updated —{' '}
            { lastUpdated && (
            <time datetime={lastUpdated.toISOString()}>
              {lastUpdated.toLocaleDateString(lang, { dateStyle: 'medium', timeZone: 'UTC' })}
            </time>
            )}
          </p>
          <p>
            &copy; {new Date().getFullYear()}&nbsp;<a target="_blank" href="https://anoma.ly">Anomaly Innovations</a>
          </p>
        </div>
      </div>
    </footer>
 )
}
{
  template === "splash" && (
    <footer class="splash">
      <p>
        &copy; {new Date().getFullYear()}&nbsp;<a target="_blank" href="https://anoma.ly">Anomaly Innovations</a>
      </p>
      <div class="links">
        <div class="pages">
          <a target="_blank" href="https://guide.sst.dev">Guide</a>
          <a href="/about">About</a>
          <a href={`mailto:${config.email}`}>Contact</a>
        </div>
        <div class="social">
          <a href={config.youtube} target="_blank">
            <Icon name="youtube" size="1em" />
          </a>
          <a href={config.discord} target="_blank">
            <Icon name="discord" size="1em" />
          </a>
          <a href={config.github} target="_blank">
            <Icon name="github" size="1em" />
          </a>
          <a href={config.linkedin} target="_blank">
            <Icon name="linkedin" size="1em" />
          </a>
          <a href={config.twitter} target="_blank">
            <Icon name="x.com" size="1em" />
          </a>
        </div>
      </div>
    </footer>
  )
}

<style>
  footer.doc {
    margin-top: 3rem;
    border-top: 1px solid var(--divider-color);
  }

  .meta {
    gap: 0.75rem 3rem;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-block: 3rem 1.5rem;
    font-size: var(--sl-text-sm);
  }
  @media (min-width: 30rem) {
    .meta {
      flex-direction: row;
    }
  }
  .doc a, .doc p {
    padding-block: 0.125rem;
  }
  .doc a {
    gap: 0.4375rem;
    align-items: center;
    text-decoration: none;
    color: var(--color-text);
    font-size: var(--sl-text-sm);
  }
  .doc a svg {
    opacity: var(--icon-opacity);
  }
  .doc a:hover {
    color: var(--sl-color-text-accent);
  }
  .doc p {
    color: var(--color-text-dimmed);
  }
  @media (min-width: 30rem) {
    .doc p {
      text-align: right;
    }
  }
  .doc p a {
    color: var(--color-text-dimmed);
  }

  footer.splash {
    margin: 0;
    flex: 0 0 auto;
    padding-block: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    justify-content: space-between;
  }
  @media (max-width: 50rem) {
    footer.splash {
      border-top: 1px solid var(--sl-color-hairline);
    }
  }
  @media (max-width: 30rem) {
    footer.splash {
      gap: 0.5rem;
      flex-direction: column;
      align-items: flex-start;
      padding-block: calc(2 * var(--sl-nav-pad-y));
    }
  }
  .splash p {
    color: var(--color-text-dimmed);
    font-size: var(--sl-text-sm);
  }
  .splash p a {
    color: var(--color-text-dimmed);
    text-decoration: none;
  }
  .splash a:hover {
    color: var(--sl-color-text-accent);
  }
  .splash .links {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 2.5rem;
  }
  @media (max-width: 30rem) {
    .splash .links {
      gap: 0.5rem;
      align-items: flex-start;
      flex-direction: column;
    }
  }
  .splash .links .pages {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  @media (max-width: 30rem) {
    .splash .links .pages {
      gap: 1.5rem;
    }
  }
  .splash .links .pages a {
    color: var(--color-text-dimmed);
    text-decoration: none;
    font-size: var(--sl-text-sm);
  }
  .splash .links .pages a:hover {
    color: var(--sl-color-text-accent);
  }
  .splash .links .social {
    display: flex;
    align-items: center;
    gap: 0.8125rem;
  }
  @media (max-width: 30rem) {
    .splash .links .social {
      gap: 1rem;
    }
  }
  .splash .links .social a {
    color: var(--color-text-dimmed);
  }
  .splash .links .social a svg {
    vertical-align: middle;
  }
  .splash .links .social a:hover {
    color: var(--sl-color-text-accent);
  }
</style>
